<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>AIForge - 智能意图自适应执行引擎</title>  
    <link rel="icon" type="image/x-icon" href="/icons/icon.ico">  
    <link rel="stylesheet" href="/static/css/aiforge.css">  
</head>  
<body class="dark">  
    <div id="app">  
        <header class="header">  
            <div class="header-left">  
                <h1>🚀 AIForge GUI</h1>  
            </div>  
            <div class="header-right">  
                <div class="connection-status" id="connectionStatus">  
                    <span class="status-indicator" id="statusIndicator"></span>  
                    <span id="statusText">连接中...</span>  
                </div>  
                <button id="settingsBtn" class="settings-btn">  
                    ⚙️  
                </button>  
            </div>  
        </header>  
  
        <main class="main-content">    
            <div class="input-section">  
                <!-- 支持的任务类型展示 -->  
                <div class="task-types-section">  
                    <h3 class="section-title">支持的任务类型</h3>  
                    <div class="task-types-grid" id="supportedTaskTypes">  
                        <div class="task-type-card" data-type="data_fetch">  
                            <div class="task-icon">📊</div>  
                            <div class="task-info">  
                                <div class="task-name">数据获取</div>  
                                <div class="task-desc">搜索和获取各类数据</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="data_analysis">  
                            <div class="task-icon">📈</div>  
                            <div class="task-info">  
                                <div class="task-name">数据分析</div>  
                                <div class="task-desc">分析和处理数据</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="content_generation">  
                            <div class="task-icon">✍️</div>  
                            <div class="task-info">  
                                <div class="task-name">内容生成</div>  
                                <div class="task-desc">创建文档和内容</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="code_generation">  
                            <div class="task-icon">💻</div>  
                            <div class="task-info">  
                                <div class="task-name">代码生成</div>  
                                <div class="task-desc">编写和生成代码</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="search">  
                            <div class="task-icon">🔍</div>  
                            <div class="task-info">  
                                <div class="task-name">搜索查询</div>  
                                <div class="task-desc">智能搜索和查询</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="direct_response">  
                            <div class="task-icon">💬</div>  
                            <div class="task-info">  
                                <div class="task-name">知识问答</div>  
                                <div class="task-desc">直接回答问题</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="file_operations">  
                            <div class="task-icon">📁</div>  
                            <div class="task-info">  
                                <div class="task-name">文件操作</div>  
                                <div class="task-desc">文件读写和处理</div>  
                            </div>  
                        </div>  
                        <div class="task-type-card" data-type="image_processing">  
                            <div class="task-icon">🖼️</div>  
                            <div class="task-info">  
                                <div class="task-name">图像处理</div>  
                                <div class="task-desc">图像分析和编辑</div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
  
                <div class="instruction-input">  
                    <label for="instructionInput" class="input-label">指令输入</label>  
                    <textarea id="instructionInput"  
                              placeholder="请输入您的指令，系统将自动检测任务类型..."  
                              rows="3"></textarea>  
                    <div class="button-group">  
                        <button id="executeBtn" class="execute-btn">  
                            <span class="btn-icon">🚀</span>  
                            <span class="btn-text">执行指令</span>  
                        </button>  
                        <button id="stopBtn" class="stop-btn" disabled>  
                            <span class="btn-icon">⏹️</span>  
                            <span class="btn-text">停止</span>  
                        </button>  
                    </div>  
                </div>  
            </div>  
  
            <div class="output-section">  
                <div class="progress-container" id="progressContainer">  
                    <h3>执行进度</h3>  
                    <div id="progressMessages" class="progress-messages-list"></div>  
                </div>  
  
                <div class="result-container" id="resultContainer">  
                    <h3>执行结果</h3>  
                    <div id="resultContent">执行结果将在这里显示...</div>  
                </div>  
            </div>  
        </main>  
  
        <!-- 版本号显示在底部右下角 -->  
        <div class="version-display">  
            <span class="version">AIForge GUI v0.0.12</span>  
        </div>  
    </div>  
  
    <!-- 统一设置模态框 -->  
    <div id="settingsModal" class="modal">  
        <div class="modal-content">  
            <span class="close">&times;</span>  
            <h2>⚙️ 设置</h2>  
            <div class="settings-form">  
                <!-- API 配置部分 -->  
                <div class="config-section">  
                    <h3>🔑 API 配置</h3>  
                    <div class="form-row api-config-row">  
                        <div class="form-group api-key-group">  
                            <label for="apiKeyInput">API 密钥:</label>  
                            <input type="password" id="apiKeyInput" placeholder="请输入 API 密钥">  
                        </div>  
                        <div class="form-group-pair">  
                            <div class="form-group">  
                                <label for="providerInput">提供商:</label>  
                                <select id="providerInput">  
                                    <option value="openrouter">OpenRouter</option>  
                                    <option value="deepseek">DeepSeek</option>  
                                    <option value="ollama">Ollama</option>  
                                    <option value="grok">Grok</option>  
                                    <option value="qwen">Qwen</option>  
                                    <option value="gemini">Gemini</option>  
                                    <option value="claude">Claude</option>  
                                </select>  
                            </div>  
                            <div class="form-group">  
                                <label for="localeInput">语言:</label>  
                                <select id="localeInput">  
                                    <option value="zh">中文</option>  
                                    <option value="en">English</option>  
                                    <option value="ja">日本語</option>  
                                    <option value="ko">한국어</option>  
                                    <option value="fr">Français</option>  
                                    <option value="de">Deutsch</option>  
                                    <option value="es">Español</option>  
                                    <option value="pt">Português</option>  
                                    <option value="ru">Русский</option>  
                                    <option value="ar">العربية</option>  
                                    <option value="hi">हिन्दी</option>  
                                    <option value="vi">Tiếng Việt</option>  
                                </select>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
                
                <!-- 界面配置部分 -->  
                <div class="config-section">  
                    <h3>🎨 界面配置</h3>  
                    <div class="form-row interface-config-row">  
                        <div class="form-group remote-url-group">  
                            <label for="remoteUrl">远程服务器:</label>  
                            <input type="text" id="remoteUrl" placeholder="http://localhost:8000">  
                        </div>  
                        <div class="form-group-pair">  
                            <div class="form-group">  
                                <label for="themeSelect">主题:</label>  
                                <select id="themeSelect">  
                                    <option value="dark">深色</option>  
                                    <option value="light">浅色</option>  
                                </select>  
                            </div>  
                            <div class="form-group">  
                                <label for="progressLevel">进度显示:</label>  
                                <select id="progressLevel">  
                                    <option value="detailed">详细</option>  
                                    <option value="minimal">简化</option>  
                                    <option value="none">无</option>  
                                </select>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
    
                <!-- 执行参数配置 -->  
                <div class="config-section">  
                    <h3>⚙️ 执行参数</h3>  
                    <div class="form-row">  
                        <div class="form-group">  
                            <label for="maxRoundsInput">最大执行轮数:</label>  
                            <input type="number" id="maxRoundsInput" min="1" max="20" value="2">  
                        </div>  
                        <div class="form-group">  
                            <label for="maxTokensInput">最大 Token 数:</label>  
                            <input type="number" id="maxTokensInput" min="1024" max="32768" value="4096">  
                        </div>  
                    </div>  
                </div>  
                
                <div class="form-actions">  
                    <button type="button" id="cancelSettings" class="cancel-btn">取消</button>  
                    <button id="saveSettings" class="save-btn">  
                        <span class="btn-icon">💾</span>  
                        <span class="btn-text">保存设置</span>  
                    </button>  
                </div>  
            </div>  
        </div>  
    </div>
  
    <script src="/static/js/ui-adapters.js"></script>  
    <script src="/static/js/streaming-client.js"></script>  
    <script src="/static/js/config-manager.js"></script>  
    <script src="/static/js/main.js"></script>  
</body>  
</html>